<template>
  <div class="asd">
    <div class="qwe" v-for="a in menuNav" :key="a.id">
      <router-link :to="{ name: a.name }">
        <img :src="a.img" alt="" />
        <div>{{ a.label }}</div>
      </router-link>
    </div>
  </div>
</template>
<script>
import { getLocalfeatures } from '@/api/home';

export default {
  data() {
    return {
      menuNav: [],
    };
  },
  created() {
    this.getLocalfeatures();
  },
  methods: {
    async getLocalfeatures() {
      const { data } = await getLocalfeatures();
      this.menuNav = data;
    },
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}

.asd {
  margin: 0 auto;
  width: 345px;
  height: 130px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .qwe {
    height: 98px;
    background: #ffffff;
    box-shadow: 1px 4px 10px 0 rgba(0, 0, 0, 0.08);
    border-radius: 2px;

    img {
      width: 108px;
      height: 66px;
    }

    div {
      font-size: 12px;
      color: #000000;
      text-align: center;
    }
  }
}</style>
